<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景随言生—表面涂色的正方体知识测试</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .cube-face {
                position: absolute;
                background-color: rgba(79, 70, 229, 0.7);
                border: 2px solid white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                color: white;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            }
            .question-card {
                transition: all 0.3s ease;
            }
            .question-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .btn-animated {
                transition: all 0.2s ease;
            }
            .btn-animated:hover {
                transform: translateY(-2px);
            }
            .btn-animated:active {
                transform: translateY(1px);
            }
            .difficulty-badge {
                padding: 2px 8px;
                border-radius: 12px;
                font-size: 0.8rem;
                font-weight: bold;
            }
            .breathing {
                animation: breathing 2s ease-in-out infinite;
            }
            @keyframes breathing {
                0% { opacity: 1; }
                50% { opacity: 0.7; }
                100% { opacity: 1; }
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen font-sans text-dark">
    <!-- 页面头部 -->
    <header class="bg-white shadow-md py-6 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-primary text-center">
                <i class="fas fa-cube mr-3"></i>景随言生—表面涂色的正方体知识测试
            </h1>
            <p class="text-center text-gray-600 mt-2">六年级上册数学 · 空间与图形专项测试</p>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 测试介绍 -->
        <div id="intro-section" class="mb-10 bg-white rounded-xl shadow-lg p-6 text-center">
            <p class="text-lg mb-4">本测试将从15道题中随机抽取3道题（1道简单题、1道中等题、1道思考题），请认真思考并作答。</p>
            <p class="text-gray-600 mb-6">完成测试后，系统将从<span class="font-bold text-primary">速度</span>、<span class="font-bold text-secondary">正确率</span>和<span class="font-bold text-accent">思考例</span>三个维度进行评价（每项0-10分）。</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <button id="refresh-btn" class="btn-animated bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-8 rounded-full shadow-lg flex items-center justify-center">
                    <i class="fas fa-sync-alt mr-2"></i> 刷新题目
                </button>
                <button id="start-btn" class="btn-animated bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg flex items-center justify-center">
                    <i class="fas fa-play-circle mr-2"></i> 开始测试
                </button>
            </div>
            
            <!-- 题目预览区 -->
            <div id="questions-preview" class="mt-8 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <h3 class="font-semibold mb-3 text-left">本次测试题目：</h3>
                <ul class="text-left space-y-2" id="preview-list">
                    <!-- 题目预览将在这里动态生成 -->
                </ul>
            </div>
        </div>

        <!-- 计时器 -->
        <div id="timer" class="hidden fixed top-24 right-6 bg-white rounded-full shadow-lg p-3 z-10">
            <span class="font-mono text-lg font-bold text-danger" id="time-display">00:00</span>
        </div>

        <!-- 问题区域 -->
        <div id="questions-section" class="hidden">
            <div id="questions-container" class="space-y-8">
                <!-- 问题将在这里动态生成 -->
            </div>
            
            <div class="text-center mt-10">
                <button id="submit-btn" class="btn-animated bg-accent text-white font-bold py-3 px-8 rounded-full shadow-lg hidden">
                    <i class="fas fa-check mr-2"></i> 提交测试
                </button>
            </div>
        </div>

        <!-- 结果评价区域 -->
        <div id="results-section" class="hidden">
            <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                <h2 class="text-2xl font-bold text-center mb-6">测试结果评价</h2>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- 三维评价图表 -->
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-center">三维能力评估</h3>
                        <div class="h-80">
                            <canvas id="radar-chart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 详细评价 -->
                    <div>
                        <h3 class="text-xl font-semibold mb-4">详细分析</h3>
                        
                        <div class="space-y-6">
                            <div>
                                <div class="flex justify-between mb-2">
                                    <span class="font-medium">速度得分：</span>
                                    <span class="text-primary font-bold" id="speed-score">0</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-4">
                                    <div id="speed-bar" class="bg-primary h-4 rounded-full" style="width: 0%"></div>
                                </div>
                                <p class="text-sm text-gray-600 mt-1" id="speed-comment"></p>
                            </div>
                            
                            <div>
                                <div class="flex justify-between mb-2">
                                    <span class="font-medium">正确率得分：</span>
                                    <span class="text-secondary font-bold" id="accuracy-score">0</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-4">
                                    <div id="accuracy-bar" class="bg-secondary h-4 rounded-full" style="width: 0%"></div>
                                </div>
                                <p class="text-sm text-gray-600 mt-1" id="accuracy-comment"></p>
                            </div>
                            
                            <div>
                                <div class="flex justify-between mb-2">
                                    <span class="font-medium">思考例得分：</span>
                                    <span class="text-accent font-bold" id="thinking-score">0</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-4">
                                    <div id="thinking-bar" class="bg-accent h-4 rounded-full" style="width: 0%"></div>
                                </div>
                                <p class="text-sm text-gray-600 mt-1" id="thinking-comment"></p>
                            </div>
                            
                            <div class="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-100">
                                <h4 class="font-semibold text-primary mb-2">综合评价</h4>
                                <p id="overall-comment" class="text-gray-700"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 答案解析 -->
            <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                <h3 class="text-xl font-semibold mb-4">答案解析</h3>
                
                <div id="explanations-container" class="space-y-6">
                    <!-- 答案解析将在这里动态生成 -->
                </div>
            </div>
            
            <div class="text-center">
                <button id="restart-btn" class="btn-animated bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg">
                    <i class="fas fa-redo mr-2"></i> 重新测试
                </button>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-6 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p>六年级上册数学 · 表面涂色的正方体知识测试</p>
            <p class="text-gray-400 text-sm mt-2">© 2023 数学学习测试平台</p>
        </div>
    </footer>

    <script>
        // 题目数据库 - 15道题，分为简单、中等、思考三个难度
        const questionBank = {
            easy: [
                {
                    id: 1,
                    question: "一个棱长为3厘米的正方体，表面涂满红色后，被分割成棱长为1厘米的小正方体。请问：三面涂色的小正方体有多少个？",
                    cubeSize: "3×3×3",
                    options: [
                        {text: "A. 4个", correct: false},
                        {text: "B. 6个", correct: false},
                        {text: "C. 8个", correct: true},
                        {text: "D. 12个", correct: false}
                    ],
                    explanation: "正确答案：C. 8个<br>解析：正方体有8个顶点，三面涂色的小正方体位于正方体的顶点处，因此无论棱长是多少，三面涂色的小正方体都是8个。"
                },
                {
                    id: 2,
                    question: "一个棱长为2厘米的正方体，表面涂满蓝色后，被分割成棱长为1厘米的小正方体。请问：一面涂色的小正方体有多少个？",
                    cubeSize: "2×2×2",
                    options: [
                        {text: "A. 0个", correct: true},
                        {text: "B. 4个", correct: false},
                        {text: "C. 6个", correct: false},
                        {text: "D. 8个", correct: false}
                    ],
                    explanation: "正确答案：A. 0个<br>解析：棱长为2的正方体分割后，每个小正方体都在顶点位置，都是三面涂色，因此没有一面涂色的小正方体。"
                },
                {
                    id: 3,
                    question: "一个正方体被分割成棱长为1厘米的小正方体后，有6个小正方体只有一面涂色。这个正方体的原棱长是多少厘米？",
                    cubeSize: "?×?×?",
                    options: [
                        {text: "A. 2厘米", correct: false},
                        {text: "B. 3厘米", correct: true},
                        {text: "C. 4厘米", correct: false},
                        {text: "D. 5厘米", correct: false}
                    ],
                    explanation: "正确答案：B. 3厘米<br>解析：一面涂色的小正方体位于每个面的中心位置，每个面有1个，6个面共6个，这是棱长为3的正方体的特征。"
                },
                {
                    id: 4,
                    question: "一个棱长为4厘米的正方体，表面涂满黄色后，被分割成棱长为1厘米的小正方体。请问：两面涂色的小正方体位于正方体的什么位置？",
                    cubeSize: "4×4×4",
                    options: [
                        {text: "A. 顶点处", correct: false},
                        {text: "B. 棱上（非顶点）", correct: true},
                        {text: "C. 面的中心", correct: false},
                        {text: "D. 正方体内部", correct: false}
                    ],
                    explanation: "正确答案：B. 棱上（非顶点）<br>解析：两面涂色的小正方体位于正方体的棱上，但不包括顶点位置，因为顶点处的小正方体有三个面涂色。"
                },
                {
                    id: 5,
                    question: "一个正方体表面涂满颜色后，分割成若干个小正方体。其中，没有涂色的小正方体有1个。这个正方体被分割成了多少个小正方体？",
                    cubeSize: "3×3×3",
                    options: [
                        {text: "A. 8个", correct: false},
                        {text: "B. 27个", correct: true},
                        {text: "C. 64个", correct: false},
                        {text: "D. 125个", correct: false}
                    ],
                    explanation: "正确答案：B. 27个<br>解析：只有1个没有涂色的小正方体，说明它位于正方体中心，原正方体棱长为3，共3×3×3=27个小正方体。"
                }
            ],
            medium: [
                {
                    id: 6,
                    question: "一个棱长为5厘米的正方体，表面涂满红色后，被分割成棱长为1厘米的小正方体。请问：两面涂色的小正方体有多少个？",
                    cubeSize: "5×5×5",
                    options: [
                        {text: "A. 36个", correct: true},
                        {text: "B. 48个", correct: false},
                        {text: "C. 60个", correct: false},
                        {text: "D. 72个", correct: false}
                    ],
                    explanation: "正确答案：A. 36个<br>解析：两面涂色的小正方体位于棱上（不包括顶点）。棱长为5的正方体，每条棱上有5-2=3个两面涂色的小正方体，正方体有12条棱，因此总数为3×12=36个。"
                },
                {
                    id: 7,
                    question: "一个棱长为6厘米的正方体，表面涂满蓝色后，被分割成棱长为1厘米的小正方体。请问：一面涂色的小正方体有多少个？",
                    cubeSize: "6×6×6",
                    options: [
                        {text: "A. 96个", correct: true},
                        {text: "B. 104个", correct: false},
                        {text: "C. 112个", correct: false},
                        {text: "D. 144个", correct: false}
                    ],
                    explanation: "正确答案：A. 96个<br>解析：一面涂色的小正方体位于每个面的中心区域。棱长为6的正方体，每个面上有(6-2)×(6-2)=16个一面涂色的小正方体，6个面总共有16×6=96个。"
                },
                {
                    id: 8,
                    question: "一个正方体表面涂满颜色后，分割成棱长为1厘米的小正方体，其中两面涂色的小正方体有48个。这个正方体的原棱长是多少厘米？",
                    cubeSize: "?×?×?",
                    options: [
                        {text: "A. 4厘米", correct: false},
                        {text: "B. 5厘米", correct: false},
                        {text: "C. 6厘米", correct: true},
                        {text: "D. 7厘米", correct: false}
                    ],
                    explanation: "正确答案：C. 6厘米<br>解析：两面涂色的小正方体数量为12×(n-2)，其中n为原棱长。根据12×(n-2)=48，可得n-2=4，因此n=6厘米。"
                },
                {
                    id: 9,
                    question: "一个棱长为4厘米的正方体，表面涂满黄色后，被分割成棱长为1厘米的小正方体。请问：三面、两面、一面涂色的小正方体一共有多少个？",
                    cubeSize: "4×4×4",
                    options: [
                        {text: "A. 56个", correct: true},
                        {text: "B. 64个", correct: false},
                        {text: "C. 60个", correct: false},
                        {text: "D. 52个", correct: false}
                    ],
                    explanation: "正确答案：A. 56个<br>解析：三面涂色：8个；两面涂色：12×(4-2)=24个；一面涂色：6×(4-2)²=24个；总计8+24+24=56个。"
                },
                {
                    id: 10,
                    question: "一个正方体表面涂满红色后，分割成棱长为1厘米的小正方体。其中，一面涂色的小正方体数量是两面涂色的2倍。这个正方体的原棱长是多少厘米？",
                    cubeSize: "?×?×?",
                    options: [
                        {text: "A. 4厘米", correct: false},
                        {text: "B. 5厘米", correct: false},
                        {text: "C. 6厘米", correct: true},
                        {text: "D. 7厘米", correct: false}
                    ],
                    explanation: "正确答案：C. 6厘米<br>解析：一面涂色：6×(n-2)²；两面涂色：12×(n-2)。根据题意：6×(n-2)² = 2×12×(n-2) → (n-2) = 4 → n=6厘米。"
                }
            ],
            hard: [
                {
                    id: 11,
                    question: "一个长8厘米、宽5厘米、高6厘米的长方体，表面涂满红色后，被分割成棱长为1厘米的小正方体。请问：三面涂色的小正方体有多少个？",
                    cubeSize: "8×5×6",
                    options: [
                        {text: "A. 6个", correct: false},
                        {text: "B. 8个", correct: true},
                        {text: "C. 10个", correct: false},
                        {text: "D. 12个", correct: false}
                    ],
                    explanation: "正确答案：B. 8个<br>解析：长方体和正方体一样，三面涂色的小正方体都位于顶点处，一个长方体有8个顶点，因此三面涂色的小正方体有8个。"
                },
                {
                    id: 12,
                    question: "一个棱长为n厘米的正方体，表面涂满颜色后，被分割成棱长为1厘米的小正方体。用含有n的式子表示没有涂色的小正方体的个数，正确的是：",
                    cubeSize: "n×n×n",
                    options: [
                        {text: "A. n³", correct: false},
                        {text: "B. (n-2)³", correct: true},
                        {text: "C. 6(n-2)²", correct: false},
                        {text: "D. 12(n-2)", correct: false}
                    ],
                    explanation: "正确答案：B. (n-2)³<br>解析：没有涂色的小正方体位于正方体内部，形成一个棱长为(n-2)的小正方体，因此其数量为(n-2)×(n-2)×(n-2)=(n-2)³。"
                },
                {
                    id: 13,
                    question: "一个正方体表面涂满颜色后，分割成棱长为1厘米的小正方体。已知没有涂色的小正方体有64个，那么一面涂色的小正方体有多少个？",
                    cubeSize: "?×?×?",
                    options: [
                        {text: "A. 96个", correct: true},
                        {text: "B. 100个", correct: false},
                        {text: "C. 108个", correct: false},
                        {text: "D. 112个", correct: false}
                    ],
                    explanation: "正确答案：A. 96个<br>解析：没有涂色的小正方体有64个，即(n-2)³=64，因此n-2=4，n=6。一面涂色的小正方体数量为6×(6-2)²=6×16=96个。"
                },
                {
                    id: 14,
                    question: "一个棱长为5厘米的正方体，表面涂满红色后，先横切一刀、再竖切一刀、最后水平切一刀，将正方体分成8个小长方体。请问：这些小长方体中，表面没有红色的有多少个？",
                    cubeSize: "5×5×5",
                    options: [
                        {text: "A. 0个", correct: false},
                        {text: "B. 1个", correct: true},
                        {text: "C. 2个", correct: false},
                        {text: "D. 4个", correct: false}
                    ],
                    explanation: "正确答案：B. 1个<br>解析：每切一刀都将正方体分成两部分，三刀后分成8个小长方体。只有位于正中心的那个小长方体没有接触原正方体的外表面，因此表面没有红色。"
                },
                {
                    id: 15,
                    question: "一个正方体表面涂满颜色后，分割成棱长为1厘米的小正方体。已知一面涂色的小正方体数量比没有涂色的多48个，这个正方体的原棱长是多少厘米？",
                    cubeSize: "?×?×?",
                    options: [
                        {text: "A. 5厘米", correct: false},
                        {text: "B. 6厘米", correct: false},
                        {text: "C. 7厘米", correct: false},
                        {text: "D. 8厘米", correct: true}
                    ],
                    explanation: "正确答案：D. 8厘米<br>解析：设棱长为n，一面涂色：6(n-2)²，没有涂色：(n-2)³。根据题意：6(n-2)² - (n-2)³ = 48。设k = n-2，得6k² - k³ = 48 → k³ - 6k² + 48 = 0。尝试k=6：216 - 216 + 48=48→正确。因此k=6，n=8厘米。"
                }
            ]
        };

        // 全局变量
        let selectedQuestions = [];
        let startTime;
        let timerInterval;
        let elapsedTime = 0;
        let currentQuestionIndex = 0;
        let correctAnswers = 0;
        let thinkingScores = [];
        let questionTimes = [];
        let questionStartTime;

        // DOM元素
        const introSection = document.getElementById('intro-section');
        const questionsSection = document.getElementById('questions-section');
        const resultsSection = document.getElementById('results-section');
        const startBtn = document.getElementById('start-btn');
        const refreshBtn = document.getElementById('refresh-btn');
        const submitBtn = document.getElementById('submit-btn');
        const restartBtn = document.getElementById('restart-btn');
        const timer = document.getElementById('timer');
        const timeDisplay = document.getElementById('time-display');
        const previewList = document.getElementById('preview-list');
        const questionsContainer = document.getElementById('questions-container');
        const explanationsContainer = document.getElementById('explanations-container');

        // 初始化 - 随机选择题目
        function initQuestions() {
            // 从每个难度级别随机选择1题
            const easyQuestion = getRandomQuestion(questionBank.easy);
            const mediumQuestion = getRandomQuestion(questionBank.medium);
            const hardQuestion = getRandomQuestion(questionBank.hard);
            
            // 保存选中的题目
            selectedQuestions = [
                { ...easyQuestion, difficulty: 'easy' },
                { ...mediumQuestion, difficulty: 'medium' },
                { ...hardQuestion, difficulty: 'hard' }
            ];
            
            // 显示题目预览
            updateQuestionPreview();
        }

        // 从题目数组中随机选择一题
        function getRandomQuestion(questions) {
            const randomIndex = Math.floor(Math.random() * questions.length);
            return questions[randomIndex];
        }

        // 更新题目预览
        function updateQuestionPreview() {
            previewList.innerHTML = '';
            
            selectedQuestions.forEach((q, index) => {
                const difficultyText = q.difficulty === 'easy' ? '简单题' : 
                                     q.difficulty === 'medium' ? '中等题' : '思考题';
                const difficultyClass = q.difficulty === 'easy' ? 'bg-green-100 text-green-800' : 
                                      q.difficulty === 'medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800';
                
                const li = document.createElement('li');
                li.className = 'flex items-start';
                li.innerHTML = `
                    <span class="difficulty-badge ${difficultyClass} mr-2 mt-1">${difficultyText}</span>
                    <span>${q.question.substring(0, 50)}${q.question.length > 50 ? '...' : ''}</span>
                `;
                previewList.appendChild(li);
            });
        }

        // 显示题目
        function displayQuestions() {
            questionsContainer.innerHTML = '';
            
            selectedQuestions.forEach((q, index) => {
                const difficultyText = q.difficulty === 'easy' ? '简单题' : 
                                     q.difficulty === 'medium' ? '中等题' : '思考题';
                const difficultyClass = q.difficulty === 'easy' ? 'bg-green-100 text-green-800' : 
                                      q.difficulty === 'medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800';
                
                const questionCard = document.createElement('div');
                questionCard.className = 'question-card bg-white rounded-xl shadow-lg p-6';
                questionCard.id = `question-${index + 1}`;
                questionCard.dataset.index = index;
                questionCard.style.display = index === 0 ? 'block' : 'none';
                
                let optionsHtml = '';
                q.options.forEach(option => {
                    optionsHtml += `
                        <button class="answer-btn btn-animated flex-1 border-2 border-gray-300 hover:border-primary rounded-lg py-2 px-4 text-left" 
                                data-correct="${option.correct}">
                            ${option.text}
                        </button>
                    `;
                });
                
                questionCard.innerHTML = `
                    <div class="flex items-center mb-4">
                        <span class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">${index + 1}</span>
                        <h2 class="text-xl font-bold">问题 ${index + 1} <span class="difficulty-badge ${difficultyClass} ml-2">${difficultyText}</span></h2>
                    </div>
                    <div class="mb-6">
                        <p class="text-lg mb-4">${q.question}</p>
                        
                        <!-- 正方体示意图 -->
                        <div class="flex justify-center my-6">
                            <div class="relative w-40 h-40" id="cube-${index + 1}">
                                <!-- 3D正方体简化展示 -->
                                <div class="cube-face w-32 h-32" style="transform: translateZ(16px);">${q.cubeSize}</div>
                                <div class="cube-face w-32 h-32" style="transform: translateX(16px) rotateY(90deg);"></div>
                                <div class="cube-face w-32 h-32" style="transform: translateY(-16px) rotateX(90deg);"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="answers flex flex-col sm:flex-row gap-3 mb-4">
                        ${optionsHtml}
                    </div>
                    
                    <div class="thinking-example mb-4 hidden">
                        <label class="block text-gray-700 font-medium mb-2">思考过程（有助于提高"思考例"评分）：</label>
                        <textarea class="w-full border border-gray-300 rounded-lg p-3 h-24 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="请简要描述你的思考过程..."></textarea>
                    </div>
                    
                    <button class="next-btn btn-animated bg-primary text-white font-bold py-2 px-6 rounded-lg float-right breathing ${index === selectedQuestions.length - 1 ? 'hidden' : ''}">
                        下一题 <i class="fas fa-arrow-right ml-1"></i>
                    </button>
                `;
                
                questionsContainer.appendChild(questionCard);
            });
            
            // 为所有按钮添加事件
            attachButtonEvents();
        }

        // 为按钮添加事件（核心修复部分）
        function attachButtonEvents() {
            // 为答案按钮添加事件
            document.querySelectorAll('.answer-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 如果已经选择了答案，不重复处理
                    if (this.disabled) return;
                    
                    // 获取当前题目卡片
                    const questionCard = this.closest('.question-card');
                    const questionIndex = parseInt(questionCard.dataset.index);
                    
                    // 记录答题时间
                    const questionEndTime = new Date();
                    const questionTime = Math.floor((questionEndTime - questionStartTime) / 1000);
                    questionTimes[questionIndex] = questionTime;
                    
                    // 禁用所有答案按钮
                    const answerBtns = questionCard.querySelectorAll('.answer-btn');
                    answerBtns.forEach(b => {
                        b.disabled = true;
                        b.classList.remove('hover:border-primary');
                    });
                    
                    // 标记答案对错
                    if (this.getAttribute('data-correct') === 'true') {
                        this.classList.remove('border-gray-300');
                        this.classList.add('border-secondary', 'bg-green-50');
                        this.innerHTML += ' <i class="fas fa-check text-secondary"></i>';
                        correctAnswers++;
                    } else {
                        this.classList.remove('border-gray-300');
                        this.classList.add('border-danger', 'bg-red-50');
                        this.innerHTML += ' <i class="fas fa-times text-danger"></i>';
                        
                        // 显示正确答案
                        answerBtns.forEach(b => {
                            if (b.getAttribute('data-correct') === 'true') {
                                b.classList.remove('border-gray-300');
                                b.classList.add('border-secondary', 'bg-green-50');
                                b.innerHTML += ' <i class="fas fa-check text-secondary"></i>';
                            }
                        });
                    }
                    
                    // 显示思考过程输入框
                    const thinkingExample = questionCard.querySelector('.thinking-example');
                    thinkingExample.classList.remove('hidden');
                    
                    // 显示下一题按钮
                    const nextBtn = questionCard.querySelector('.next-btn');
                    if (nextBtn) {
                        nextBtn.classList.remove('hidden');
                        // 滚动到下一题按钮位置
                        nextBtn.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                    
                    // 如果是最后一题，显示提交按钮
                    if (questionIndex === selectedQuestions.length - 1) {
                        submitBtn.classList.remove('hidden');
                    }
                });
            });
            
            // 为下一题按钮添加事件（关键修复）
            document.querySelectorAll('.next-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 获取当前题目卡片
                    const currentCard = this.closest('.question-card');
                    const currentIndex = parseInt(currentCard.dataset.index);
                    
                    // 验证是否有下一题
                    if (currentIndex + 1 >= selectedQuestions.length) return;
                    
                    // 评分当前题的思考过程
                    const thinkingText = currentCard.querySelector('textarea').value;
                    thinkingScores[currentIndex] = scoreThinking(thinkingText);
                    
                    // 隐藏当前题，显示下一题
                    currentCard.style.display = 'none';
                    const nextCard = document.getElementById(`question-${currentIndex + 2}`);
                    nextCard.style.display = 'block';
                    
                    // 更新当前题目索引
                    currentQuestionIndex = currentIndex + 1;
                    
                    // 滚动到下一题顶部
                    nextCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    
                    // 记录下一题开始时间
                    questionStartTime = new Date();
                });
            });
        }

        // 显示答案解析
        function displayExplanations() {
            explanationsContainer.innerHTML = '';
            
            selectedQuestions.forEach((q, index) => {
                const difficultyText = q.difficulty === 'easy' ? '简单题' : 
                                     q.difficulty === 'medium' ? '中等题' : '思考题';
                const difficultyClass = q.difficulty === 'easy' ? 'bg-green-100 text-green-800' : 
                                      q.difficulty === 'medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800';
                
                const explanationCard = document.createElement('div');
                explanationCard.className = 'p-4 border border-gray-200 rounded-lg';
                explanationCard.innerHTML = `
                    <h4 class="font-bold mb-2">问题 ${index + 1} 解析 <span class="difficulty-badge ${difficultyClass} ml-2">${difficultyText}</span></h4>
                    <div class="text-gray-700">${q.explanation}</div>
                `;
                
                explanationsContainer.appendChild(explanationCard);
            });
        }

        // 开始测试
        startBtn.addEventListener('click', () => {
            introSection.classList.add('hidden');
            questionsSection.classList.remove('hidden');
            timer.classList.remove('hidden');
            
            // 重置当前题目索引
            currentQuestionIndex = 0;
            correctAnswers = 0;
            thinkingScores = [];
            questionTimes = [];
            
            // 显示题目
            displayQuestions();
            
            // 开始计时
            startTime = new Date();
            questionStartTime = startTime;
            timerInterval = setInterval(updateTimer, 1000);
        });

        // 刷新题目
        refreshBtn.addEventListener('click', () => {
            initQuestions();
        });

        // 更新计时器
        function updateTimer() {
            const currentTime = new Date();
            elapsedTime = Math.floor((currentTime - startTime) / 1000);
            
            const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, '0');
            const seconds = (elapsedTime % 60).toString().padStart(2, '0');
            
            timeDisplay.textContent = `${minutes}:${seconds}`;
        }

        // 提交测试按钮事件
        submitBtn.addEventListener('click', function() {
            // 评分最后一题的思考过程
            const thinkingText = document.querySelector(`#question-${selectedQuestions.length} textarea`).value;
            thinkingScores.push(scoreThinking(thinkingText));
            
            // 停止计时
            clearInterval(timerInterval);
            
            // 计算得分
            calculateScores();
            
            // 显示答案解析
            displayExplanations();
            
            // 显示结果
            questionsSection.classList.add('hidden');
            resultsSection.classList.remove('hidden');
            
            // 生成图表
            generateChart();
        });

        // 重新测试按钮事件
        restartBtn.addEventListener('click', function() {
            // 重置变量
            clearInterval(timerInterval);
            elapsedTime = 0;
            currentQuestionIndex = 0;
            correctAnswers = 0;
            thinkingScores = [];
            questionTimes = [];
            
            // 重新选择题目
            initQuestions();
            
            // 重置UI
            resultsSection.classList.add('hidden');
            introSection.classList.remove('hidden');
        });

        // 评分思考过程
        function scoreThinking(text) {
            if (!text || text.trim() === '') return 3; // 未填写思考过程
            if (text.length < 20) return 5; // 简短思考过程
            if (text.length < 50) return 7; // 一般思考过程
            return 10; // 详细思考过程
        }

        // 计算各项得分
        function calculateScores() {
            // 计算速度得分 (0-10分)
            const totalTime = questionTimes.reduce((a, b) => a + b, 0);
            let speedScore;
            
            if (totalTime <= 120) { // 2分钟内完成所有题目
                speedScore = 10;
            } else if (totalTime <= 180) { // 3分钟内
                speedScore = 9;
            } else if (totalTime <= 240) { // 4分钟内
                speedScore = 8;
            } else if (totalTime <= 300) { // 5分钟内
                speedScore = 7;
            } else if (totalTime <= 360) { // 6分钟内
                speedScore = 6;
            } else if (totalTime <= 420) { // 7分钟内
                speedScore = 5;
            } else if (totalTime <= 480) { // 8分钟内
                speedScore = 4;
            } else if (totalTime <= 540) { // 9分钟内
                speedScore = 3;
            } else if (totalTime <= 600) { // 10分钟内
                speedScore = 2;
            } else {
                speedScore = 1; // 超过10分钟
            }

            // 计算正确率得分 (0-10分)
            const accuracyScore = Math.round((correctAnswers / selectedQuestions.length) * 10);

            // 计算思考例得分 (0-10分)
            const thinkingScore = Math.round(thinkingScores.reduce((a, b) => a + b, 0) / thinkingScores.length);

            // 显示得分
            document.getElementById('speed-score').textContent = speedScore;
            document.getElementById('accuracy-score').textContent = accuracyScore;
            document.getElementById('thinking-score').textContent = thinkingScore;

            // 设置进度条
            document.getElementById('speed-bar').style.width = `${speedScore * 10}%`;
            document.getElementById('accuracy-bar').style.width = `${accuracyScore * 10}%`;
            document.getElementById('thinking-bar').style.width = `${thinkingScore * 10}%`;

            // 添加评价文字
            addComments(speedScore, accuracyScore, thinkingScore, totalTime);

            return {
                speed: speedScore,
                accuracy: accuracyScore,
                thinking: thinkingScore
            };
        }

        // 添加评价文字
        function addComments(speed, accuracy, thinking, time) {
            const minutes = Math.floor(time / 60);
            const seconds = time % 60;
            
            // 速度评价
            let speedComment;
            if (speed >= 9) {
                speedComment = `非常快！总用时 ${minutes}分${seconds}秒，反应迅速，解题效率高。`;
            } else if (speed >= 7) {
                speedComment = `良好。总用时 ${minutes}分${seconds}秒，解题速度适中。`;
            } else if (speed >= 5) {
                speedComment = `一般。总用时 ${minutes}分${seconds}秒，可以适当提高解题速度。`;
            } else {
                speedComment = `较慢。总用时 ${minutes}分${seconds}秒，需要加强练习提高解题速度。`;
            }
            document.getElementById('speed-comment').textContent = speedComment;

            // 正确率评价
            let accuracyComment;
            if (accuracy === 10) {
                accuracyComment = `太棒了！${selectedQuestions.length}道题全部正确，对表面涂色的正方体知识掌握非常扎实。`;
            } else if (accuracy >= 7) {
                accuracyComment = `不错！正确率较高，对知识点有较好的理解。`;
            } else if (accuracy >= 4) {
                accuracyComment = `一般。部分知识点理解不够透彻，需要加强练习。`;
            } else {
                accuracyComment = `较差。对表面涂色的正方体知识掌握不足，建议重新学习相关内容。`;
            }
            document.getElementById('accuracy-comment').textContent = accuracyComment;

            // 思考例评价
            let thinkingComment;
            if (thinking >= 8) {
                thinkingComment = `非常好！思考过程清晰详细，逻辑严密，能够深入理解问题本质。`;
            } else if (thinking >= 6) {
                thinkingComment = `良好。有明确的思考过程，逻辑基本清晰，能够解释解题思路。`;
            } else if (thinking >= 4) {
                thinkingComment = `一般。思考过程较为简单，需要更深入的分析和表达。`;
            } else {
                thinkingComment = `需要改进。建议详细记录自己的思考过程，帮助理解和记忆知识点。`;
            }
            document.getElementById('thinking-comment').textContent = thinkingComment;

            // 综合评价
            const totalScore = (speed + accuracy + thinking) / 3;
            let overallComment;
            if (totalScore >= 8) {
                overallComment = `恭喜你！你在表面涂色的正方体知识测试中表现出色，不仅答题速度快，正确率高，而且思考过程清晰。继续保持这种良好的学习状态！`;
            } else if (totalScore >= 6) {
                overallComment = `不错的表现！你对表面涂色的正方体知识有较好的掌握。如果能在速度和思考深度上再下功夫，相信会有更大的进步。`;
            } else if (totalScore >= 4) {
                overallComment = `你的表现一般。建议多做练习，加深对表面涂色的正方体相关知识的理解，同时注意提高答题速度和思考的深度。`;
            } else {
                overallComment = `你在这次测试中的表现不太理想。建议重新学习表面涂色的正方体相关知识，理解不同位置小正方体的涂色规律，多做练习，相信下次会有进步。`;
            }
            document.getElementById('overall-comment').textContent = overallComment;
        }

        // 生成雷达图
        function generateChart() {
            const ctx = document.getElementById('radar-chart').getContext('2d');
            
            const speedScore = parseInt(document.getElementById('speed-score').textContent);
            const accuracyScore = parseInt(document.getElementById('accuracy-score').textContent);
            const thinkingScore = parseInt(document.getElementById('thinking-score').textContent);
            
            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['速度', '正确率', '思考例'],
                    datasets: [{
                        label: '你的得分',
                        data: [speedScore, accuracyScore, thinkingScore],
                        backgroundColor: 'rgba(79, 70, 229, 0.2)',
                        borderColor: 'rgba(79, 70, 229, 1)',
                        pointBackgroundColor: 'rgba(79, 70, 229, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(79, 70, 229, 1)'
                    }, {
                        label: '优秀标准',
                        data: [8, 8, 8],
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        borderColor: 'rgba(16, 185, 129, 0.7)',
                        borderDash: [5, 5],
                        pointBackgroundColor: 'rgba(16, 185, 129, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(16, 185, 129, 1)',
                        fill: true
                    }]
                },
                options: {
                    scales: {
                        r: {
                            angleLines: {
                                display: true
                            },
                            suggestedMin: 0,
                            suggestedMax: 10,
                            ticks: {
                                stepSize: 2
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.raw + '/10';
                                }
                            }
                        }
                    }
                }
            });
        }

        // 简单的3D正方体效果
        function initCubes() {
            document.addEventListener('mouseover', function(e) {
                if (e.target.closest('[id^="cube-"]')) {
                    const cube = e.target.closest('[id^="cube-"]');
                    cube.addEventListener('mousemove', handleCubeMouseMove);
                    cube.addEventListener('mouseleave', handleCubeMouseLeave);
                }
            });
        }

        function handleCubeMouseMove(e) {
            const cube = e.currentTarget;
            const rect = cube.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const xPos = (x / rect.width - 0.5) * 20;
            const yPos = (y / rect.height - 0.5) * -20;
            
            cube.style.transform = `perspective(1000px) rotateY(${xPos}deg) rotateX(${yPos}deg)`;
            cube.style.transition = 'transform 0.1s ease';
        }

        function handleCubeMouseLeave(e) {
            const cube = e.currentTarget;
            cube.style.transform = 'perspective(1000px) rotateY(0) rotateX(0)';
            cube.removeEventListener('mousemove', handleCubeMouseMove);
            cube.removeEventListener('mouseleave', handleCubeMouseLeave);
        }

        // 页面加载完成后初始化
        window.addEventListener('load', () => {
            initQuestions();
            initCubes();
        });
    </script>
</body>
</html>
    